<template>
	<view class="content">

		<!-- 轮播图 -->
		<view class="u-demo-block" v-if="goodsInfoShow">
			<u-swiper :list="list6" @change="changelbt" radius="0" :circular="true" :autoplay="true"
				indicatorStyle="right: 20px" height="375" imgMode="aspectFit " indicator indicatorMode="line"
				@click="previewImages(list6,currentNum)">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>
		<!-- 内容 -->
		<view class="" v-if="goodsInfoShow">
			<view class="padding ">
				<view class="padding  border ffffff">
					<view class="margin_right3 qianshu">￥{{goodsInfo.goodsprice.price}}</view>
					<view class="notitletext margin_top">{{goodsInfo.title}}</view>
				</view>
			</view>
			<!-- 商品详情和商品评价 -->
			<view class="padding_lrb margin_top1">
				<view class="ffffff  padding" v-if="goodsInfo.comment">
					<view class="flexbetween">
						<view class="word_sr black">商品评价</view>
						<view class="flexleft" @click="checkPlAll">
							<view class="margin_right1 text_five">查看全部</view>
							<view class="orange_icon"></view>
						</view>
					</view>
					<view class="xiahuax margin_top">
						<view class="flexbetween">
							<view class="flexleft">
								<view class="pjslt margin_right2">
									<image :src="goodsInfo.comment.user.avatar_text" mode=""></image>
								</view>
								<view class="">
									<view class="bigbtext">{{goodsInfo.comment.user.nickname}}</view>
									<view class="flexleft margin_top1">
										<view class="wujiaox margin_right1" v-for="(item,index) in goodsInfo.comment.score_describe" :key="index"></view>
									</view>
								</view>
							</view>
							<view class="text_a color_six">{{goodsInfo.comment.createtime_text}}</view>
						</view>
						<view class="margin_top">
							<view class="text_a color_six">{{goodsInfo.comment.content}}</view>
							<view class="flexleft margin_top">
								<view class="mjplt margin_right1" v-for="(item,index) in goodsInfo.comment.images_text"
									:key="item">
									<image :src="item" mode="" @click="previewImages(item,index)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="padding ffffff margin_top section">
					<view class="text word_san black">商品详情</view>
					<view class="margin_top">
						<u-parse :content="goodsInfo.content"></u-parse>
						<!-- <image src="../static/logo.png " mode="" class="xq_img"></image> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb ffffff">
			<view class="flexbetween">
				<view class="flexleft">
					<!-- 	<view class="margin_right2">
						<view class="dianpu"></view>
						<view class="heierse margin_top1">店铺</view>
					</view> -->
					<view class="margin_right2">
						<view class="flexcolumn">
							<button open-type="contact" class="footer_stars">
								<view class="lianxi"></view>
								<view class="heierse margin_top1">客服</view>
							</button>
						</view>
					</view>
				</view>
				<view class="shuangpinbtn">
					<view class="flexleft">
						<view style="margin-right: 94rpx;" @click="shopping">
							<view class="bigbaitext textcenter">加入购物车</view>
						</view>
						<view>
							<view class="bigbaitext textcenter" @click="buy">立即购买</view>
						</view>
					</view>
				</view>
				<!-- 立即购买 -->
				<!-- <view class="ljduih"  @click="ggshow=true">立即购买</view> -->
			</view>
		</view>
		<view>
			<!-- 规格弹窗 -->
			<u-popup :show="ggshow" @close="closeFn" mode="bottom" :round="10">
				<view class="padding">
					<view class="flexleft">
						<view class="guigslt margin_right2">
							<image :src="goodsInfo.image_text" mode=""></image>
						</view>
						<view class="">
							<view class="flexleft">
								<view class="dahtext margin_right1">¥{{price}}</view>
								<view class="huisetextjx" v-if="market_price">￥{{market_price}}</view>
							</view>
							<view class="margin_top2 erslhuang">库存：{{stock}}</view>
						</view>
					</view>
					<view class="padding_top">
						<template v-if="goodsInfo.spu.length">
							<view>
								<view class="titletext margin_top">选择规格</view>
								<view v-for="value in goodsInfo.spu" :key="value.id">
									<view>{{value.name}}</view>
									<view class="flexleft flex_wrap">
										<view
											:class="value.selecttext==child?'margin_top margin_right2 huangg':'margin_top margin_right2 huigg'"
											v-for="child in value.item" :key="child" @click="checkgg(value,child)">
											{{child}}
										</view>
									</view>
								</view>
							</view>
						</template>
						<view class="flexbetween margin_top">
							<view class="titletext ">购买数量</view>
							<view class="jiajian">
								<view class="jianhao" @click="reducenum">
									<!-- <view class="line"></view> -->
								</view>
								<input class="xhtext" type="number" v-model="buynumber">
								<!-- <view class="xhtext">{{buynumber}}</view> -->
								<view class="jiahao" @click="addnum"></view>
							</view>
						</view>
					</view>
					<view class="margin_top bigbtn" @click="ggclose">确定</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				ggshow: false, //规格
				addCar: false,
				list6: [],
				currentNum: 0, //轮播图当前位置
				price: "", //规格弹框价格
				ptuser_price: '',
				gjuser_price: '',
				market_price: "", //规格弹框划线价格
				// fanli_price: "", //返利价格
				stock: "", //库存
				sku_id: "", //规格id
				guige_text: "", //选择的规格文本
				buynumber: 1, //购买数量
				guigeflag: false, //规格标识，判断是否选中规格，选中为true否则为false
				// 商品类型
				goods_id: "", //商品id
				goodsInfo: {},
				goodsInfoShow: false
			}
		},
		watch: {
			'goodsInfo.spu': {
				handler(newval) {
					let arr = []
					newval.forEach(item => {
						arr.push(item.selecttext)
					})

					// 规格换算价格
					let text = arr.join()
					// return false
					this.goodsInfo.sku.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.difference == text) {
							this.price = item.price //价格赋值
							this.market_price = item.market_price //划线价格赋值
							// this.fanli_price = item.fl_price
							this.stock = item.stock //库存
							// this.guige_text = text //规格文本赋值
							this.sku_id = item.id
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			this.goods_id = options.id
		},
		onShow() {
			this.getGoodsInfo()
		},
		methods: {
			changelbt(e){
				this.currentNum = e.current
			},
			previewImages(arr, index) {
				let i = arr; //获取当前页面的轮播图数据
				
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			closeFn() {
				this.ggshow = false
			},
			checkPlAll() {
				uni.navigateTo({
					url: "/pages_index/quanbupj?goods_id=" + this.goods_id
				})
			},
			getGoodsInfo() {
				let _this = this
				httpRequest.request('/api/goods/GoodsDetail', 'GET', {
					goods_id: _this.goods_id,
				}).then(res => {
					if (res.code == 1) {
						if (res.data.spu.length) {
							res.data.spu.forEach(item => {
								_this.$set(item, "selecttext", "")
								item.item = item.item.split(',')
							})
						}
						this.goodsInfo = res.data
						this.list6 = res.data.images_text
						this.price = res.data.goodsprice.price
						this.market_price = res.data.goodsprice.market_price
						this.stock = res.data.goodsprice.stock
						this.goodsInfoShow = true
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
						setTimeout(()=>{
							uni.navigateBack(1)
						},500)
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			//立即购买
			buy() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				this.ggshow = true

			},
			// 加入购物车
			shopping() { //加入购物车弹窗
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				this.ggshow = true
				this.addCar = true
			},
			// 规格选择
			checkgg(value, child) {
				console.log(111)
				console.log(child)
				value.selecttext = child
				// console.log(value.selecttext)
			},
			// 数量减
			reducenum() {
				if (this.buynumber == 1) {
					httpRequest.toast("不能再减了哦！")
					return
				}
				this.buynumber = Number(this.buynumber) - 1
			},
			//数量加
			addnum() {
				if (Number(this.stock) == Number(this.buynumber) || Number(this.stock) < Number(this.buynumber)) {
					httpRequest.toast("没有那么多库存呢，亲！")
					return false
				}
				this.buynumber = Number(this.buynumber) + 1
			},
			// 规格
			ggclose() {
				let _this = this
				if (!_this.guigeflag) {
					httpRequest.toast("请先选择规格")
					return
				}
				if (Number(this.stock) < Number(this.buynumber)) {
					httpRequest.toast("没有那么多库存呢，亲！")
					return false
				}
				if(Number(this.buynumber<=0)){
					httpRequest.toast("至少购买一件商品哦！")
					return false
				}
				_this.ggshow = false
				if (_this.addCar) {
					httpRequest.request('/api/cart/addCart', 'GET', {
						goods_id: _this.goodsInfo.id, // 商品ID
						number: _this.buynumber, // 购买数量
						sku_id: _this.sku_id, // 规格ID
					}, false, false, true).then(res => {
						if (res.code == 1) {
							httpRequest.toast('加入购物车成功');
						} else {
							httpRequest.toast(res.msg);
						}
						_this.addCar = false
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
					return false
				}

				let obj = {
					data: [{
						goods_id: _this.goodsInfo.id,
						number: _this.buynumber,
						sku_id: _this.sku_id,
					}],
					sourcetype: 1, //1商品详情，2购物车
				}
				uni.navigateTo({
					url: "/pages_index/querendd?msg=" + encodeURIComponent(JSON.stringify(obj))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}
	
	button {
		padding: 0;
		border-radius: 0;
		background-color: #fff;
		line-height: 40rpx;
	}
	
	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	
	}
	.xq_img {
		width: 625rpx;
		height: 728rpx;
	}

	.text_five {
		color: #D48B39;
	}

	.contactbtn {
		background-color: #fff;
		border: none;
		font-size: 32rpx;
		// line-height: 24rpx;
		color: #333;
		// height: 78rpx;
		height: 40rpx;
		// line-height: 78rpx;
		// padding: 0 400rpx 0 0;
	}

	.contactbtn::after {
		border: 0;
	}


	.ljduih {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		width: 286rpx;
		height: 93rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 70rpx;
		background-color: #ff7510;
	}

	.gudingdb {
		padding: 30rpx 30rpx 60rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.mjplt {
		width: 140rpx;
		height: 140rpx;
		border-radius: 18rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 18rpx;
		}
	}

	.button {
		padding: 20rpx 86rpx;
		background-color: #ff7510;
		border-radius: 70rpx;
		color: #ffff;
	}

	.pjslt {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.flexbottom1 {
		display: flex;
		align-items: flex-end;
		// justify-content: center;
	}

	.bigbtn {
		background-color: RGBA(255, 117, 16, 1);
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 82rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.section {
		margin-bottom: 200rpx;
	}

	.imgs {
		width: 152rpx;
		height: 152rpx;
		border-radius: 18rpx;
	}


	.gouwuc {
		margin: auto;
		width: 45rpx;
		height: 45rpx;
		background-size: 100% 100%;
		//background-image: url('/static/image/index/kefu.png');
	}

	.heierse {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.dianpu {
		margin: auto;
		width: 35rpx;
		height: 32rpx;
		background-size: 100% 100%;
		//background-image: url('/static/image/index/dianpu.png');
	}

	.lianxi {
		margin: auto;
		width: 35rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('/static/image/home/kefu.png');
	}

	.wujiaox {
		width: 27rpx;
		height: 27rpx;
		background-size: 100% 100%;
		background-image: url('/static/image/home/collect_star.png');
	}


	.qianshu {
		font-size: 48rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: RGBA(255, 117, 16, 1);
	}


	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	/deep/.u-safe-area-inset-bottom {
		padding-bottom: 0 !important;
	}


	.shuangpinbtn {
		padding: 20rpx 39rpx;
		background-size: 100% 100%;
		background-image: url('/static/image/home/shopping.png');


		.xiaohhtext {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #A73A20;
		}

		.bigbaitext {
			font-size: 26rpx;
			font-family: DIN-Bold, DIN;
			font-weight: 800;
			color: #FFFFFF;
		}
	}

	.jiajian {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 50rpx;
		position: relative;
		background-size: 100% 100%;
		background-image: url('/static/image/home/bujinqi.png');
	}

	.jiahao {
		background-size: 100% 100%;
		width: 21rpx;
		height: 19rpx;
		position: absolute;
		top: 14rpx;
		right: 12rpx;
	}

	.xhtext {
		width: 80rpx;
		text-align: center;
		font-size: 31rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.jianhao {
		width: 22rpx;
		position: absolute;
		left: 13rpx;
		// height: 3.5rpx;
		top: 20rpx;
		height: 20rpx;

		.line {
			height: 3.5rpx;
			width: 22rpx;
			background-color: #999999;
		}
	}




	.huangg {
		// width: 147rpx;
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: RGBA(255, 117, 16, 1);
		background: RGBA(255, 242, 232, 1);
		border-radius: 27rpx;

	}

	.huigg {
		padding: 10rpx 30rpx;
		// width: 147rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		background: #F5F5F5;
		border-radius: 27rpx;

	}

	.erslhuang {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
	}

	.dahtext {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: RGBA(255, 117, 16, 1);
	}

	.guigslt {
		width: 134rpx;
		height: 134rpx;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.pjslt {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.huisetext {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.huisetextjx {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		text-decoration: line-through;
	}
</style>